<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>验证码倒计时</title>
    <link rel="stylesheet" type="text/css" href="../common/sui.css">
    <style type="text/css">
    </style>
</head>

<body>
    <form action="" class="sui-form form-horizontal" style="width: 350px;margin: 30px auto;">
        <div class="control-group">
            <label class="control-label">验证码：</label>
            <div class="controls">
                <input type="text" name="code" placeholder="验证码">
                <button href="javascript:;" class="sui-btn btn-primary send" onclick="send()" id="btn">获取</button>
            </div>
        </div>
    </form>
</body>
<script type="text/javascript">
    function hasClass(element, cls) {
        return (" " + element.className + " ").indexOf(" " + cls + " ") > -1;
    }
    function send() {
        if (!hasClass(document.getElementById("btn"), "disabled")) {
            let i = 10, self = document.getElementById("btn");
            self.disabled = true;
            self.classList.add("disabled");
            self.innerHTML = i;
            let repeat = setInterval(function () {
                i--;
                if (i == 0) {
                    self.disabled = false;
                    self.classList.remove("disabled");
                    self.innerHTML = "获取";
                    clearInterval(repeat);
                } else {
                    self.classList.add("disabled");
                    self.innerHTML = i;
                }
            }, 1000);
        }
    }
</script>

</html>